<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>慕课手机</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header class="header">
    <div class="header__wrap">
        <div class="header__logo">慕课手机</div>

        <nav class="header__nav">
            <a href="#" class="header__nav-item header__nav-item_status_active">首页</a>
            <a href="#" class="header__nav-item">型号</a>
            <a href="#" class="header__nav-item">说明</a>
            <a href="#" class="header__nav-item">其他产品</a>
            <a href="#" class="header__nav-item header__nav-item_custom_button">立即购买</a>
        </nav>
    </div>

</header>

<!-- 第一屏 -->
<div class="screen-1">
    <h2 class="screen-1__heading"><b>慕课手机</b> 让你的生活更精彩</h2>
    <div class="screen-1__phone"></div>
    <div class="screen-1__shadow"></div>
</div>


<!-- 第二屏 -->
<div class="screen-2">
    <h2 class="screen-2__heading">优美的设计，更令人着迷</h2>
    <h4 class="screen-2__subheading">
        采用受欢迎的设计，让它更出色。<br/>
        轻便手感更舒适。炫丽高清的显示屏，整个外观显得格外精致。
    </h4>
    <div class="screen-2__phone">
        <div class="screen-2__point screen-2__point_i_1">高清摄像</div>
        <div class="screen-2__point screen-2__point_custom_right screen-2__point_i_2">超薄机身</div>
        <div class="screen-2__point screen-2__point_custom_right screen-2__point_i_3">大屏显示</div>
    </div>

</div>

<!-- 第三屏 -->
<div class="screen-3">
    <div class="screen-3__wrap">
        <h2 class="screen-3__heading">外形小巧，功能强大的手机</h2>
        <h4 class="screen-3__subheading">
            采用受欢迎的设计，让它更加出色。<br />
            款式小巧，轻便手感更舒适。炫丽高清的显示屏，整个外观显得格外精致。
        </h4>
        <div class="screen-3__phone"></div>
    </div>
</div>

<!--第四屏-->
<div class="screen-4"></div>
</body>
</html>